<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
		<meta charset="utf-8">
		<title>杰利联合</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
		<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
		<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
		<meta content="no-cache,must-revalidate" http-equiv="Cache-Control">
		<meta content="no-cache" http-equiv="pragma">
		<meta content="0" http-equiv="expires">
		<meta content="telephone=no, address=no" name="format-detection">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
		  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
		<link rel="stylesheet" type="text/css" href="${ctxStatic}/jiu/css/mobile_module.css?v=1492676217" media="all">
		<link href="${ctxStatic}/jiu/css/common.css?v=1492676217" rel="stylesheet" type="text/css">
		<link rel="stylesheet" href="${ctxStatic}/jiu/css/ui-choose.css"/>
			<link rel="stylesheet" href="${ctxStatic}/jiu/css/pingjia.css"/>
    <style>
		.hearder{
				height: 50px;
				background-color: #30B0F3;
				width: 100%;
				text-align: center;
				color: white;
				font-size: 20px;
                line-height:50px;
                position: fixed;
			    top: 0;
			    z-index: 1;
			}
			.shang {
				display: flex;
				display: -webkit-flex;
				justify-content: flex-start;
				align-items: center;
				margin-top: 60px;
				margin-left: 5px;
				margin-right: 5px;
				border: 2px #E2E2E2 dotted;
				padding: 10px;
			}
			
			.name {
				font-size: 16px;
			}
			
			.ping1 {
				font-size: 16px;
				padding: 5px;
				margin-top: 15px;
				color: #666666;
				margin-left: 5px;
			}
			
			.clearfix::after {
				display: block;
				content: '';
				height: 0;
				overflow: hidden;
				clear: both;
			}
/*星星样式*/
.block {
	/* width: 100%; */
	margin: 0;
	/* padding-top: 10px; */
	line-height: 29px;
	margin-right: 10px;
	padding: 5px 0px;
	border-radius: 3px;
}

.block .star_score {
	float: left;
}

.star_list {
	height: 21px;
	margin: 50px;
	line-height: 21px;
}

.block p, .block .attitude {
	padding-left: 20px;
	line-height: 35px;
	height: 21px;
}

.block p span {
	color: #C00;
	font-size: 16px;
	font-family: Georgia, "Times New Roman", Times, serif;
}

.star_score {
	width: 175px;
	height: 21px;
	position: relative;
}

.star_score a {
	height: 21px;
	display: block;
	text-indent: -999em;
	position: absolute;
	left: 0;
}
/*星星一*/
#startone .star_score {
	background: url(${ctxStatic}/jiu/ratingimg/s2.png);
}

#startone .star_score a:hover {
	background: url(${ctxStatic}/jiu/ratingimg/s1.png);
	left: 0;
}

#startone .star_score a.clibg {
	background: url(${ctxStatic}/jiu/ratingimg/s1.png);
	left: 0;
}
/*星星二*/
#starttwo .star_score {
	background: url(${ctxStatic}/jiu/ratingimg/s2.png);
}

#starttwo .star_score a:hover {
	background: url(${ctxStatic}/jiu/ratingimg/s1.png);
	left: 0;
}

#starttwo .star_score a.clibg {
	background: url(${ctxStatic}/jiu/ratingimg/s1.png);
	left: 0;
}
/*星星三*/
#starttree .star_score {
	background: url(${ctxStatic}/jiu/ratingimg/s2.png);
}

#starttree .star_score a:hover {
	background: url(${ctxStatic}/jiu/ratingimg/s1.png);
	left: 0;
}

#starttree .star_score a.clibg {
	background: url(${ctxStatic}/jiu/ratingimg/s1.png);
	left: 0;
}
/*星星样式*/
</style>
</head>
<body style="background-color: white;">
	<header class="hearder" style="">
		<a href="javascript:window.history.go(-1)"> <img
			src="${ctxStatic}/jiu/img/fanhui.png"
			style="height: 20px; color: white; top: 15px; position: absolute; left: 10px;" />
		</a> 服务评价
	</header>
				<div class="modal fade" style="margin-top: 30%;" id="myModal"
			tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header" style="width:100%;position:relative">
						<button type="button" class="close" data-dismiss="modal"
							aria-label="Close" style="position:absolute;right:10px;text-align:right">
							<span aria-hidden="true">&times;</span>
						</button>
						<h4 class="modal-title" id="myModalLabel">操作提示</h4>
					</div>
					<div class="modal-body"></div>
					<div class="modal-footer" style="display:flex;justify-content:space-between;" >
						<button type="button" class="btn btn-success" data-dismiss="modal"
							id="yes" style="width:100px">确定</button>
						<button style="width:100px;background:red;" type="button" class="btn btn-danger" data-dismiss="modal"
							id="no">取消</button>
					</div>
				</div>
			</div>
		</div>
	<div class="shang" style="position: relative;">
		<div style="height: 100px; width: 100px;">
			<img src="${ctxUser }/jiu/${jiuOrder.manufactorLogo}"
				style="width: 100%; height: 100%; border-radius: 3px;">
		</div>
		<div style="margin-left: 10px; line-height: 25px;">
			<p class="name">${jiuOrder.manufactorName}</p>
			<p class="property" style="font-size: 15px; margin-top: 15px;">
				<span class="colorless">价格</span> <span class="orange">${jiuOrder.totalPrice}积分</span>
			</p>
			<p class="property" style="">
				<span class="colorless">数量</span> <span>${jiuOrder.orderNum}</span>
			</p>
			<p class="colorless" style="padding-top: 0px;">销量&nbsp;${factorjermsg.salesnum }</p>
		</div>

		<div style="position: absolute; right: 10px; top: 5px;">
			<p style="text-align: right;">
				<img
					src="${ctxStatic }/jiu/ratingimg/${factorjermsg.creditRating.ratingpic }"
					style="height: 16px;" />
			</p>
		</div>

		<div class="zhibiao"
			style="bottom: 10px; font-size: 12px; line-height: 20px; text-align: right;">
			<p>
				综合评价<span style="color: #ff9000; font-size: 14px;">&nbsp;${factorjermsg.allscore }</span>
			</p>
		</div>
	</div>
	<!-- 
		<div>
			<p class="ping1">请您对厂家进行评价</p>
			<div id="starttwo" class="block clearfix">
			    <div class="star_score"></div>
				<p style="float:left;"></p>
				<div class="attitude"></div>
			</div>
		</div>
		 -->
	<div style="border-bottom: 1px solid #eeeeee; padding-bottom: 20px;">
		<p class="ping1">请你对厂家进行评价</p>
		<div id="startone" class="block clearfix ">
			<p style="float: left; line-height: 21px; padding: 0px 10px;"
				id="111">接单服务</p>
			<div class="star_score one" id="222"></div>
			<div class="attitude" style="line-height: 21px;" id="333"></div>
		</div>
		<div id="starttwo" class="block clearfix ">
			<p style="float: left; line-height: 21px; padding: 0px 10px;">生产质量</p>
			<div class="star_score two"></div>
			<div class="attitude" style="line-height: 21px;"></div>
		</div>
		<div id="starttree" class="block clearfix ">
			<p style="float: left; line-height: 21px; padding: 0px 10px;">配送速度</p>
			<div class="star_score thd"></div>
			<div class="attitude" style="line-height: 21px;"></div>
		</div>
	</div>
	<!-- <div>
			<input type="text" id="word" name="word" maxlength="255" placeholder="请输入评价内容"/>
		</div> -->
	<div style="height: 30px;">
		<textarea placeholder="输入评论内容最少6个字" type="text" id="word" name="word"
			maxlength="255" minlength="6"
			style="border-right-style: none; border-left-style: none; border-top-style: none; border-bottom: 1px solid #eee;"></textarea>
	</div>

	<div
		style="margin: 0 15px; position: fixed; bottom: 20px; right: 10px; left: 10px; z-index: 999999; background-color: #fff;">
		<button class="pingjia_btn" onclick="submit()">提交</button>
	</div>

		<script type="text/javascript" src="${ctxStatic}/jiu/js/jquery-2.0.3.min.js"></script>
		<script src="${ctxStatic}/jiu/js/ui-choose.js"></script>	
	
			<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
       <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script>
			// 将所有.ui-choose实例化
			$('.ui-choose').ui_choose();
			// uc_03 ul 多选
			var uc_03 = $('#uc_03').data('ui-choose');
			uc_03.click = function(index, item) {
			};
			uc_03.change = function(index, item) {				
			};
		</script>
		<script type="text/javascript" src="${ctxStatic}/jiu/js/startScore.js"></script>
		
		<script>		
		scoreFun($("#startone"), {
			fen_d: 22.1, //每一个a的宽度
			ScoreGrade: 5, //a的个数 10或者
			nameScore: "startone",
		});
		 scoreFun($("#starttwo"), {
			fen_d: 22.1, //每一个a的宽度
			ScoreGrade: 5, //a的个数 10或者
			nameScore: "starttwo",
		});
		 
		scoreFun($("#starttree"), {
			fen_d: 22.1, //每一个a的宽度
			ScoreGrade: 5, //a的个数 10或者
			nameScore: "starttree",
		});
			
			 var starNum=0;
			 var starNumTwo=0;
			 var starNumThd=0;
			 function start(n,name){			
				
				
				 var id=$(name).attr("id");
				
				 
				 if("startone"==id){
					 starNum=n; 
				 }
				 if("starttwo"==id){
					 starNumTwo=n; 
				 }
				 if("starttree"==id){
					 starNumThd=n; 
				 }
			 } 
			   
			     
			 var tag=0;
		function submit() {
			if (tag == 1) {
				return;
			}

			if (starNum > 0) {
			} else {
				  $('#myModal').modal('show')  ;
       		   $(".modal-body").text("请对接单服务进行评价");
				return;
			}
			if (starNumTwo > 0) {
			} else {
				  $('#myModal').modal('show')  ;
	       		   $(".modal-body").text("请对生产质量进行评价");
				return;
			}
			if (starNumThd > 0) {
			} else {
				  $('#myModal').modal('show')  ;
	       		   $(".modal-body").text("请对配送速度进行评价");
				return;
			}

			if (starNum + starNumTwo + starNumThd > 0) {
				var evaluateWordIds = $("#word").val();

				if (evaluateWordIds.length < 6) {
					  $('#myModal').modal('show')  ;
		       		   $(".modal-body").text("请至少评论6个字！");
					return;
				}

				if (evaluateWordIds == "") {
					  $('#myModal').modal('show')  ;
		       		   $(".modal-body").text("请输入评价内容");
				} else {
					tag = 1;
					$.ajax({
								type : 'POST',
								url : "${ctxFront }/jiu/ajaxEvaluate",
								dataType : "json",
								cache : true,
								async : false,
								data : {
									uid : "${uid}",
									orderId : "${jiuOrder.id}",
									type : "${type}",
									starNum : starNum,
									starNumTwo : starNumTwo,
									starNumThd : starNumThd,
									evaluateWordIds : evaluateWordIds
								},
								success : function(data) {
									  $('#myModal').modal('show')  ;
						       		   $(".modal-body").text(data.message);
									if (data.msg == 'success') {
										$("#yes").click(function(){
											window.location.href = "${ctxFront }/jiu/toSeeEvaluate?uid=${uid}&orderId=${jiuOrder.id}&type=${type}";
										});
									}
								}
							});
				}
			} else {
				  $('#myModal').modal('show')  ;
	       		   $(".modal-body").text("请至少打分一项");
			}

		}
	</script>
</body>
</html>